<template>
  <v-container fluid fill-height class="player-wrapper">
    <v-layout row wrap>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex md4 sm1 class="px-2 mb-2">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg">
                <v-icon>today</v-icon>
                <span class="mx-2">日充值</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout md12 wrap row class="left-border-green">
                  <v-flex md6>今日充值: {{topupRecord.today}}元</v-flex>
                  <v-flex md6>昨日充值: {{topupRecord.yesterday}}元</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md4 class="px-2 mb-2">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg">
                <v-icon>event_note</v-icon>
                <span class="mx-2">周充值</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout md12 wrap row class="left-border-red">
                  <v-flex md6>本周充值: {{topupRecord.thisWeek}}元</v-flex>
                  <v-flex md6>上周充值: {{topupRecord.lastWeek}}元</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md4 class="px-2 mb-2">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg">
                <v-icon>date_range</v-icon>
                <span class="mx-2">月充值</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout md12 wrap row class="left-border-indigo">
                  <v-flex md6>本月充值: {{topupRecord.thisMonth}}元</v-flex>
                  <v-flex md6>上月充值: {{topupRecord.lastMonth}}元</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex md12 class="mt-1">
        <v-layout row wrap>
          <v-flex md2 sm1 class="mt-2 date-wrapper">
            <!-- 按时间查询 -->
            <v-menu offset-y>
              <v-btn depressed slot="activator">
                <v-icon>date_range</v-icon>
                <span>选择起始日期</span>
              </v-btn>
              <v-date-picker min="2017-05-14" :max="currentDate" landscape :first-day-of-week="0" locale="zh-cn" v-model="queryForm1.fromTime"></v-date-picker>
            </v-menu>
            <span class="date-text">{{queryForm1.fromTime}}</span>
          </v-flex>
          <v-flex md2 class="mt-2 date-wrapper">
            <!-- 按时间查询 -->
            <v-menu offset-y>
              <v-btn depressed slot="activator">
                <v-icon>date_range</v-icon>
                <span>选择结束日期</span>
              </v-btn>
              <v-date-picker min="2017-05-14" :max="currentDate" landscape :first-day-of-week="0" locale="zh-cn" v-model="queryForm1.toTime"></v-date-picker>
            </v-menu>
            <span class="date-text">{{queryForm1.toTime}}</span>
          </v-flex>
          <v-flex md2 sm1>
            <v-btn @click="searchAll" dark color="blue" class="mt-2">
              <v-icon>search</v-icon>
              <span class="pl-2 subheading">搜索</span>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex md12 class="mt-3">
        <v-data-table hide-actions :headers="headers" :items="tableData" class="elevation-1">
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.number }}</td>
            <td class="text-xs-center subheading">{{ props.item.totalPrice }}</td>
            <td class="text-xs-center subheading">{{ props.item.notPay }}</td>
            <td class="text-xs-center subheading">{{ props.item.paied }}</td>
            <td class="text-xs-center subheading">{{ props.item.delivery }}</td>
            <td class="text-xs-center subheading">{{ getTime(props.item.fromTime) }}</td>
            <td class="text-xs-center subheading">{{ getTime(props.item.toTime) }}</td>
            <td class="text-xs-center">
              <v-btn flat round dark color="green darken-1" class="mx-1" @click="orderDetails(props.item)">
                <span class="mx-1">充值详情</span>
                <v-icon color="green darken-1">perm_contact_calendar</v-icon>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
      </v-flex>
      <v-flex md12 class="mt-1" v-if="subTableData.length">
        <v-layout row wrap>
          <v-flex md1 class="mx-2">
            <v-text-field name="orderNo" label="订单编号" v-model="queryForm2.orderNo"></v-text-field>
          </v-flex>
          <v-flex md1 class="mx-2">
            <v-text-field name="yqId" label="用户ID" v-model="queryForm2.lftid"></v-text-field>
          </v-flex>
          <v-flex md1 class="mx-2">
            <v-text-field name="yqId" label="用户昵称" v-model="queryForm2.nickname"></v-text-field>
          </v-flex>
          <v-flex md1 class="mx-2">
            <v-text-field name="yqId" label="邀请人ID" v-model="queryForm2.proxyId"></v-text-field>
          </v-flex>
          <v-flex md1 class="mx-2">
              <v-select :items="statusItems" v-model="queryForm2.orderStatus" label="订单状态" single-line></v-select>
          </v-flex>
          <v-flex md2 sm1>
            <v-btn @click="searchSingle" dark color="blue" class="mt-2">
              <v-icon>search</v-icon>
              <span class="pl-2 subheading">搜索</span>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex md12 class="mt-1" v-if="subTableData.length">
        <v-data-table hide-actions :loading="showProgress" :headers="subHeaders" :items="subTableData" class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.orderNo }}</td>
            <td class="text-xs-center subheading">{{ props.item.yqId }}</td>
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.price }}</td>
            <td class="text-xs-center subheading">{{ getTime(props.item.createTime) }}</td>
            <td class="text-xs-center subheading">{{ getTime(props.item.finishTime) }}</td>
            <td class="text-xs-center subheading">
              <span v-if="props.item.orderStatus != 2">{{ props.item.orderStatus | nType }}</span>
              
              <v-btn v-else flat round dark color="green darken-1" class="mx-1" @click="deliverGoods(props.item)">
                <span class="mx-1">尝试发货</span>
                <v-icon color="green darken-1" size="20">fa-diamond</v-icon>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>

        </v-data-table>
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as player from "../../api/player";
import { mapMutations } from "vuex";
import { getTime, getToday } from "../../util";
import echarts from "echarts";
export default {
  data: () => ({
    tabs: null,
    btnToggle: null,
    showProgress: false,
    dialog: false,
    modal: false,
    limit: 8,
    offset: 0,
    modalText: "",
    queryForm1: {
      fromTime: "",
      toTime: ""
    },
    queryForm2: {
      orderNo: "",
      proxyId: "",
      lftid: "",
      nickname: "",
      orderStatus: ""
    },
    statusItems: [
      { text: "未支付", value: 1 },
      { text: "已支付", value: 3 },
      { text: "已发货", value: 5 }
    ],
    topupRecord: {
      today: 8888,
      yesterday: 8888,
      thisWeek: 88888,
      lastWeek: 88888,
      thisMonth: 888888,
      lastMonth: 888888
    },
    headers: [
      { text: "充值次数", value: "count", align: "center", sortable: false },
      { text: "充值总额", value: "sum", align: "center", sortable: false },
      { text: "未支付订单", value: "sum", align: "center", sortable: false },
      { text: "已支付订单", value: "sum", align: "center", sortable: false },
      { text: "已发货订单", value: "sum", align: "center", sortable: false },
      {
        text: "起始时间",
        value: "createTime",
        align: "center",
        sortable: false
      },
      {
        text: "结束时间",
        value: "saleLevel",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    subHeaders: [
      { text: "订单号", value: "orderNo", align: "center", sortable: false },
      {
        text: "邀请人ID",
        value: "yqId",
        align: "center",
        sortable: false
      },
      {
        text: "购买用户ID",
        value: "lftid",
        align: "center",
        sortable: false
      },
      {
        text: "购买用户昵称",
        value: "nickname",
        align: "center",
        sortable: false
      },
      { text: "充值金额", value: "total", align: "center", sortable: false },
      {
        text: "生成时间",
        value: "createTime",
        align: "center",
        sortable: false
      },
      {
        text: "完成时间",
        value: "finishTime",
        align: "center",
        sortable: false
      },
      {
        text: "订单状态",
        value: "status",
        align: "center",
        sortable: false
      }
    ],
    tableData: [],
    subTableData: [],
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    selectedItem: null,
    currentDate: ""
  }),
  mounted() {
    // this.initialize();
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getTopupCard();

    this.currentDate = getToday();
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  filters: {
    nType(value) {
      const strVal = value + "";
      switch (strVal) {
        case "1":
          return "未支付";
        case "2":
          return "未支付";
        case "3":
          return "未发货";
        case "4":
          return "发货中";
        case "5":
          return "已发货";
        default:
          return "未定义";
      }
    }
  },
  methods: {
    getTime,
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.queryForm = {
        fromTime: "",
        toTime: ""
      };
      this.pagination.page = 1;
      this.getTopupCard();
    },
    getTopupCard() {
      player.getTopupCard.r().then(({ data }) => {
        console.log(data);
        if (data.result == 0) {
          this.topupRecord = data.data;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      });
    },
    getPlayersTopup() {
      let opt = {};
      if (!this.queryForm1.fromTime && !this.queryForm1.toTime) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请选择起止日期"
        });
      }
      if (
        new Date(this.queryForm1.fromTime).getTime() >
        new Date(this.queryForm1.toTime).getTime()
      ) {
        return $Vue.$emit("toggleSnackbar", {
          text: "起始日期不能早于结束日期"
        });
      }

      opt.toTime = new Date(this.queryForm1.toTime + " 23:59:59").getTime();
      opt.fromTime = new Date(this.queryForm1.fromTime + " 00:00:00").getTime();

      player.getPlayersTopup.r(opt).then(({ data }) => {
        console.log(data);
        if (data.result == 0) {
          this.tableData = [data.data];
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      });
    },
    getTopupDetails(time) {
      let opt = {
        limit: this.limit,
        offset: this.offset,
        fromTime: time.fromTime,
        toTime: time.toTime
      };
      this.showProgress = true;
      player.getTopupDetails.r(opt).then(({ data }) => {
        console.log(data);
        if (data.result == 0) {
          this.subTableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    searchTopupDetails() {
      let valid = 0;
      let opt = {
        limit: this.limit,
        offset: this.offset
      };
      _.forEach(this.queryForm2, (item, key) => {
        item ? (opt[key] = item) : valid++;
      });
      if (valid == 5) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请至少选择一个查询条件"
        });
      }
      opt.fromTime = this.selectedItem.fromTime;
      opt.toTime = this.selectedItem.toTime;
      this.showProgress = true;
      player.searchTopupDetails.r(opt).then(({ data }) => {
        console.log(data);
        if (data.result == 0) {
          this.subTableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    deliverGoods(item) {
      player.deliverGoods.r(item.orderNo).then(({ data }) => {
        console.log(data);
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },
    searchAll() {
      this.getPlayersTopup();
    },
    searchSingle(fromPage) {
      this.isSearch = true;
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      this.searchTopupDetails();
      // this.getTopupDetails();
    },
    orderDetails(item) {
      console.log(item);
      this.getTopupDetails(item);
      this.selectedItem = item;
      // this.subTableData = [
      //   {
      //     orderNo: "a4btr4a12gb44100870hsr7",
      //     yqId: "104125",
      //     lftid: "441014",
      //     amount: 145,
      //     createTime: "2018-5-2 14:36:20",
      //     finishTime: "2018-5-2 14:42:41",
      //     orderStatus: 5,
      //     nickname: "USJ"
      //   },
      //   {
      //     orderNo: "a4btr4a12gb445100870hsr7",
      //     yqId: "104125",
      //     lftid: "441014",
      //     amount: 145,
      //     createTime: "2018-5-2 14:36:20",
      //     finishTime: "2018-5-2 14:42:41",
      //     orderStatus: 2,
      //     nickname: "USJ"
      //   }
      // ];
    },
    initialize() {
      this.tableData = [
        {
          count: 18,
          total: 8425,
          fromTime: "2018-5-1",
          toTime: "2018-5-8",
          notpay: 2,
          payed: 15,
          closed: 34
        }
      ];
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        let time = {
          fromTime: this.tableData[0].fromTime,
          toTime: this.tableData[0].toTime
        };
        this.getTopupDetails(time);
      } else {
        // ***
        this.searchSingle("wyvj");
      }

      // this.getAnnounces(this.limit, (page - 1) * this.limit);
    }
  }
};
</script>

<style lang="less" scoped>
.cursor:hover {
  cursor: pointer;
}
.theme--light .table thead tr:first-child {
  background: #f1f1f1;
}
.date-wrapper {
  position: relative;
  .date-text {
    display: inline-block;
    width: 100px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: absolute;
    top: 18px;
    right: 0;
  }
}
</style>